<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox, ElLoading } from "element-plus";
import {
  discernFile,
  talentPoolSave,
  talentPoolEditSave,
  talentPoolEditShow,
} from "@/http/api";
export default {
  components: { outMain },
  name: "",
  data() {
    const checkPhone = (rule, value, callback) => {
      let result = this.$ruleCheck.checkPhone(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    const checkIdcard = (rule, value, callback) => {
      let result = this.$ruleCheck.checkPhone(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    return {
      detailId: this.$route.query.id,
      customHeaders: {
        token: localStorage.getItem("token"),
      },
      textarea: "",
      disNumArr: [
        "江证",
        "健康证(海事)",
        "健康证(卫检)",
        "接种证(霍乱)",
        "接种证(黄热)",
      ],
      formData: {
        file_url: "",
        real_name: "",
        mobile: "",
        idcard: "",
        zw: "",
        qwyx: "",
        zs: "",
        xl: "",
        yysp: "",
        gzjy: "",
        cblx: "",
        hxyq: "",
        jg: "",
        gr_photo: "",
        height: "",
        weight: "",
        blood_type: "",
        gfcc: "",
        shoe_size: "",
        hyzk: "",
        jjlxr_name: "",
        jjlxr_gx: "",
        jjlxr_mobile: "",
        gj: "中国",
        csd: "",
        byyx: "",
        bysj: "",
        jl_remark: "",
        label_data: "",
        resume_experience: [],
        zs_json: [
          { name: "身份证号码", number: "", time: "", dis: true },
          { name: "护照号码", number: "", time: "", dis: true },
          { name: "海员证号码", number: "", time: "", dis: true },
          { name: "适任证书号码", number: "", time: "", dis: true },
          { name: "服务薄号码", number: "", time: "", dis: true },
          { name: "海船船员培训合格证书", number: "", time: "", dis: true },
          { name: "特殊专业培训证书", number: "", time: "", dis: true },
          { name: "船舶保安员证书", number: "", time: "", dis: true },
          { name: "江证", number: "", time: "", dis: true },
          { name: "外籍证书", number: "", time: "", dis: true },
          { name: "健康证(海事)", number: "", time: "", dis: true },
          { name: "健康证(卫检)", number: "", time: "", dis: true },
          { name: "接种证(霍乱)", number: "", time: "", dis: true },
          { name: "接种证(黄热)", number: "", time: "", dis: true },
        ],
        zs_file: "",
      },
      rules: {
        real_name: [
          { required: true, message: "船员姓名不能为空", trigger: "blur" },
        ],
        zw: [{ required: true, message: "船员职务不能为空", trigger: "blur" }],
        mobile: [
          {
            validator: checkPhone,
            required: true,
            trigger: "blur",
          },
        ],
      },
      bookLeaveArr: [
        { label: "甲一", value: "甲一" },
        { label: "甲二", value: "甲二" },
        { label: "丙一", value: "丙一" },
        { label: "丙二", value: "丙二" },
      ],
      eduType: [
        { name: "初中及以下" },
        { name: "高中" },
        { name: "大专" },
        { name: "本科" },
        { name: "研究生" },
      ],
      yyspArr: [
        { name: "无法沟通" },
        { name: "勉强沟通" },
        { name: "正常沟通" },
        { name: "非常流畅" },
      ],
      expType: [
        { name: "经验不限" },
        { name: "1-3年经验" },
        { name: "3-5年经验" },
        { name: "5-10年经验" },
        { name: "10年以上经验" },
      ],
      bloodArr: [
        { name: "A型" },
        { name: "B型" },
        { name: "AB型" },
        { name: "O型" },
      ],
      gfccArr: [
        { name: "S" },
        { name: "M" },
        { name: "L" },
        { name: "XL" },
        { name: "XXL" },
        { name: "XXXL" },
      ],
      hyzkArr: [{ name: "已婚" }, { name: "未婚" }, { name: "离异" }],
      positionArr: [],
      bootTypeArr: [],
      bootLineArr: [],
      bootNationArr: [],
      activeExpItem: {},
      showAddExp: false,
      showStep1: true,
      showStep2: true,
      activeExpId: "",
      expRules: {
        comName: [
          { required: true, message: "公司名称不能为空", trigger: "blur" },
        ],
        cm: [{ required: true, message: "请输入船名", trigger: "blur" }],
        zw: [{ required: true, message: "请输入职务", trigger: "blur" }],
        cx: [{ required: true, message: "请输入船型", trigger: "blur" }],
        scsj: [
          { required: true, message: "请选择上船时间", trigger: "change" },
        ],
        xcsj: [
          { required: true, message: "请选择下船时间", trigger: "change" },
        ],
      },
    };
  },
  props: {},
  setup() {},
  methods: {
    addBookFn() {
      this.formData.zs_json.unshift({
        name: "",
        number: "",
        time: "",
        dis: false,
      });
    },
    deleteBookFn(index) {
      this.formData.zs_json.splice(index, 1);
    },
    getTime(time) {
      const y = time.getFullYear();
      const m =
        time.getMonth() < 9 ? `0${time.getMonth() + 1}` : time.getMonth() + 1;
      const d = time.getDate() < 10 ? `0${time.getDate()}` : time.getDate();

      const str = `${y}-${m}-${d}`;
      return str;
    },
    getMonthTime(time) {
      const y = time.getFullYear();
      const m =
        time.getMonth() < 9 ? `0${time.getMonth() + 1}` : time.getMonth() + 1;
      const str = `${y}-${m}`;
      return str;
    },
    async sureEditExpFn() {
      const valid = await this.$refs.expRef.validate();
      if (!valid) {
        return;
      }
      if (this.activeExpItem.xcsj < this.activeExpItem.scsj) {
        ElMessage({
          type: "error",
          message: "下船时间不能在上船时间前",
        });
        return false;
      }
      if (typeof this.activeExpItem.xcsj == "object") {
        this.activeExpItem.xcsj = this.getMonthTime(this.activeExpItem.xcsj);
      }
      if (typeof this.activeExpItem.scsj == "object") {
        this.activeExpItem.scsj = this.getMonthTime(this.activeExpItem.scsj);
      }
      let data = { ...this.activeExpItem };
      if (this.activeExpId === "") {
        this.formData.resume_experience.push(data);
      } else {
        this.formData.resume_experience[this.activeExpId] = data;
      }
      this.showAddExp = false;
    },
    delExpFn(index) {
      this.formData.resume_experience.splice(index, 1);
    },
    editExpShowFn(item, index) {
      this.activeExpItem = { ...item };
      this.activeExpId = index;
      this.showAddExp = true;
    },
    addExpItemFn() {
      this.activeExpItem = {
        cm: "",
        cx: "",
        zd: "",
        ml: "",
        zw: "",
        hx: "",
        scsj: "",
        xcsj: "",
        comName: "",
      };
      this.activeExpId = "";
      this.showAddExp = true;
    },
    handleAvatarSuccess(response, uploadFile) {
      console.log(uploadFile);
      if (response.data.code == 1) {
        this.formData.file_url = response.data.src;
        // this.formData.file_url = response.data.src;
        ElMessageBox.confirm(
          "简历上传成功，是否使用简历精准自动识别?（备注：主要识别姓名、电话、身份证、职务等信息，防止手动填写出错。）",
          "简历自动识别",
          {
            confirmButtonText: "精准识别",
            cancelButtonText: "放弃",
            type: "success",
          }
        ).then(async () => {
          const loading = ElLoading.service({
            lock: true,
            text: "简历识别中，请等待～",
            background: "rgba(255, 255, 255, 0.7)",
          });
          const { data } = await discernFile({
            file_url: this.formData.file_url,
          });
          if (data.code == 1) {
            let details = data.data;
            console.log(data.data);
            this.formData.real_name = details.name;
            this.formData.zw = details.expect_job;
            this.formData.mobile = details.phone;
            this.formData.idcard = details.id_card;
            this.formData.height = parseInt(details.height);
            this.formData.weight = parseInt(details.weight);
            this.formData.xl = details.degree;
            this.formData.byyx = details.college;
            ElMessage({
              type: "success",
              message: "简历识别成功，内容已自动填充",
            });
          }
          loading.close();
        });
      }
    },
    clearFn() {
      this.formData = {
        file_url: "",
        real_name: "",
        mobile: "",
        idcard: "",
        zw: "",
        qwyx: "",
        zs: "",
        xl: "",
        yysp: "",
        gzjy: "",
        cblx: "",
        hxyq: "",
        jg: "",
        gr_photo: "",
        height: "",
        weight: "",
        blood_type: "",
        gfcc: "",
        shoe_size: "",
        hyzk: "",
        jjlxr_name: "",
        jjlxr_gx: "",
        jjlxr_mobile: "",
        gj: "中国",
        csd: "",
        byyx: "",
        bysj: "",
        jl_remark: "",
        label_data: "",
        resume_experience: [],
        zs_json: [
          { name: "身份证号码", number: "", time: "", dis: true },
          { name: "护照号码", number: "", time: "", dis: true },
          { name: "海员证号码", number: "", time: "", dis: true },
          { name: "适任证书号码", number: "", time: "", dis: true },
          { name: "服务薄号码", number: "", time: "", dis: true },
          { name: "海船船员培训合格证书", number: "", time: "", dis: true },
          { name: "特殊专业培训证书", number: "", time: "", dis: true },
          { name: "船舶保安员证书", number: "", time: "", dis: true },
          { name: "江证", number: "", time: "", dis: true },
          { name: "外籍证书", number: "", time: "", dis: true },
          { name: "健康证(海事)", number: "", time: "", dis: true },
          { name: "健康证(卫检)", number: "", time: "", dis: true },
          { name: "接种证(霍乱)", number: "", time: "", dis: true },
          { name: "接种证(黄热)", number: "", time: "", dis: true },
        ],
        zs_file: "",
      };
    },
    async saveFn() {
      const valid = await this.$refs.ruleForm.validate();
      if (!valid) {
        return;
      }
      if (this.formData.gzjy) {
        if (this.$ruleCheck.checkIntNumber(this.formData.gzjy)) {
          ElMessage({
            type: "error",
            message: "工作经验需为纯整数",
          });
          return false;
        }
      }
      let queryData = { ...this.formData };

      if (typeof queryData.bysj == "object") {
        queryData.bysj = this.getMonthTime(queryData.bysj);
      }
      queryData.zs_json = queryData.zs_json.map((item) => {
        console.log(typeof item.time);
        if (typeof item.time == "object") {
          item.time = this.getTime(item.time);
        }
        return item;
      });
      const { data } = this.detailId
        ? await talentPoolEditSave(queryData)
        : await talentPoolSave(queryData);
      if (data.code == 1) {
        if (this.detailId) {
          ElMessage({
            type: "success",
            message: "保存成功",
          });
          setTimeout(() => {
            this.$router.back();
          }, 1000);
        } else {
          ElMessageBox.confirm(
            "已成功录入企业人才库,是否继续录入其他船员简历?",
            "操作提示",
            {
              confirmButtonText: "继续录入",
              cancelButtonText: "返回列表",
              type: "warning",
            }
          )
            .then(() => {
              this.clearFn();
            })
            .catch(() => {
              this.$router.back();
            });
        }
      }
    },
    getData() {
      talentPoolEditShow({ biographical_notes_id: this.detailId }).then(
        (res) => {
          if (res.data.code == 1) {
            this.formData = res.data.data;
            if (res.data.data.csd) {
              this.formData.csd = res.data.data.csd.split("/");
            }
            this.formData["biographical_notes_id"] = this.detailId;
          }
        }
      );
    },
    inputIdcardFn() {
      this.formData.zs_json[0].number = this.formData.idcard;
    },
    getPlach(name) {
      if (["特殊专业培训证书", "船舶保安员证书", "外籍证书"].includes(name)) {
        return "请自定义填入多个种类名称";
      } else if (this.disNumArr.includes(name)) {
        return "此项不用填写";
      } else {
        return "请输入编号";
      }
    },
    backFn() {
      this.$router.back();
    },
  },

  mounted() {},
  async created() {
    this.positionArr = await this.$getCate.getCateFn(3);
    this.bootTypeArr = await this.$getCate.getCateFn(1);
    this.bootLineArr = await this.$getCate.getCateFn(2);
    this.bootNationArr = await this.$city.getCity();
    if (this.detailId) {
      this.getData();
    }
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formHead">
        <div>
          简历{{
            detailId ? "编辑" : "录入"
          }}(备注：简历完善后可一键导出船员简历信息发送给船东)
        </div>
        <btn value="返回上一级" @ok="backFn"></btn>
      </div>
      <div class="formMain">
        <div class="enterFile" v-if="!detailId">
          <el-upload
            class="upload-demo"
            drag
            :headers="customHeaders"
            :show-file-list="false"
            :action="$apis + '/common/Upload/UpImg1'"
            :on-success="handleAvatarSuccess"
          >
            <div class="iconfont icon-shangchuan"></div>
            <div class="el-upload__text">
              拖动简历至此或<em>点击上传</em>，自动解析简历内容
            </div>
          </el-upload>
        </div>
        <div class="formDes">
          <el-form
            label-width="120"
            :rules="rules"
            ref="ruleForm"
            :model="formData"
          >
            <div class="formHeadCont formHeadFlex">
              <div class="formHeadLeft">
                <div class="headShu"></div>
                <div>基本信息</div>
              </div>
              <div class="formOpenBtn" @click="showStep1 = !showStep1">
                {{ showStep1 ? "收起" : "展开" }}
              </div>
            </div>
            <div class="flexCont" v-if="showStep1">
              <el-form-item label="简历原件" prop="file_url">
                <el-input
                  disabled
                  placeholder="请输入简历原件"
                  v-model="formData.file_url"
                />
              </el-form-item>
              <el-form-item label="船员姓名" prop="real_name">
                <el-input
                  maxlength="10"
                  clearable
                  placeholder="请输入船员姓名"
                  v-model="formData.real_name"
                />
              </el-form-item>
              <el-form-item label="手机号" prop="mobile">
                <el-input
                  clearable
                  maxlength="11"
                  placeholder="请输入手机号"
                  v-model="formData.mobile"
                />
              </el-form-item>
              <el-form-item label="身份证号" prop="idcard">
                <el-input
                  clearable
                  maxlength="18"
                  placeholder="请输入身份证号"
                  @input="inputIdcardFn"
                  v-model="formData.idcard"
                />
              </el-form-item>
              <el-form-item label="船员职务" prop="zw">
                <el-select
                  style="width: 100%"
                  v-model="formData.zw"
                  filterable
                  clearable
                  allow-create
                  placeholder="请选择船员职务"
                >
                  <el-option
                    v-for="item in positionArr"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="证书等级" prop="zs">
                <el-select
                  style="width: 100%"
                  clearable
                  v-model="formData.zs"
                  placeholder="请选择证书等级"
                >
                  <el-option
                    v-for="item in bookLeaveArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="期望月薪" prop="qwyx">
                <el-input
                  type="number"
                  clearable
                  placeholder="请输入期望月薪"
                  v-model="formData.qwyx"
                  ><template #append>美元</template></el-input
                >
              </el-form-item>
              <el-form-item label="船员学历" prop="xl">
                <el-select
                  style="width: 100%"
                  v-model="formData.xl"
                  filterable
                  clearable
                  allow-create
                  placeholder="请选择船员学历"
                >
                  <el-option
                    v-for="item in eduType"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="英语水平" prop="yysp">
                <el-select
                  style="width: 100%"
                  v-model="formData.yysp"
                  filterable
                  clearable
                  allow-create
                  placeholder="请选择英语水平"
                >
                  <el-option
                    v-for="item in yyspArr"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="工作经验" prop="gzjy">
                <el-input
                  placeholder="请输入工作经验"
                  type="number"
                  clearable
                  v-model="formData.gzjy"
                  ><template #append>年</template></el-input
                >
              </el-form-item>

              <el-form-item label="船舶类型" prop="cblx">
                <el-select
                  style="width: 100%"
                  v-model="formData.cblx"
                  filterable
                  clearable
                  placeholder="请选择船舶类型"
                >
                  <el-option
                    v-for="item in bootTypeArr"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="航线要求" prop="hxyq">
                <el-select
                  style="width: 100%"
                  v-model="formData.hxyq"
                  clearable
                  filterable
                  placeholder="请选择航线要求"
                >
                  <el-option
                    v-for="item in bootLineArr"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="现住地址" prop="jg">
                <el-input
                  clearable
                  placeholder="请输入船员住址"
                  v-model="formData.jg"
                />
              </el-form-item>
            </div>
            <div class="formHeadCont formHeadFlex">
              <div class="formHeadLeft">
                <div class="headShu"></div>
                <div>补充信息</div>
              </div>
              <div class="formOpenBtn" @click="showStep2 = !showStep2">
                {{ showStep2 ? "收起" : "展开" }}
              </div>
            </div>
            <div class="flexCont" v-if="showStep2">
              <el-form-item label="身高" prop="height">
                <el-input
                  type="number"
                  clearable
                  placeholder="请输入船员身高"
                  v-model="formData.height"
                  ><template #append>cm</template></el-input
                >
              </el-form-item>
              <el-form-item label="体重" prop="weight">
                <el-input
                  type="number"
                  clearable
                  placeholder="请输入船员体重"
                  v-model="formData.weight"
                  ><template #append>kg</template></el-input
                >
              </el-form-item>
              <el-form-item label="鞋码" prop="shoe_size">
                <el-input
                  type="number"
                  clearable
                  placeholder="请输入船员鞋码"
                  v-model="formData.shoe_size"
                  ><template #append>码</template></el-input
                >
              </el-form-item>
              <el-form-item label="血型" prop="blood_type">
                <el-select
                  style="width: 100%"
                  v-model="formData.blood_type"
                  clearable
                  placeholder="请选择船员血型"
                >
                  <el-option
                    v-for="item in bloodArr"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="工服尺寸" prop="gfcc">
                <el-select
                  style="width: 100%"
                  v-model="formData.gfcc"
                  filterable
                  allow-create
                  clearable
                  placeholder="请选择船员工服尺寸"
                >
                  <el-option
                    v-for="item in gfccArr"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="婚姻状况" prop="hyzk">
                <el-select
                  style="width: 100%"
                  v-model="formData.hyzk"
                  filterable
                  clearable
                  allow-create
                  placeholder="请选择船员婚姻状况"
                >
                  <el-option
                    v-for="item in hyzkArr"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="国籍" prop="gj">
                <el-input
                  clearable
                  placeholder="请输入船员国籍"
                  v-model="formData.gj"
                />
              </el-form-item>
              <el-form-item label="出生地" prop="csd">
                <el-input
                  clearable
                  placeholder="请输入船员出生地"
                  v-model="formData.csd"
                />
              </el-form-item>
              <el-form-item label="紧急联系人" prop="jjlxr_name">
                <el-input
                  clearable
                  placeholder="请输入船员紧急联系人"
                  v-model="formData.jjlxr_name"
                />
              </el-form-item>
              <el-form-item label="紧急人关系" prop="jjlxr_gx">
                <el-input
                  clearable
                  placeholder="请输入船员紧急人关系"
                  v-model="formData.jjlxr_gx"
                />
              </el-form-item>
              <el-form-item label="紧急人电话" prop="jjlxr_mobile">
                <el-input
                  clearable
                  maxlength="11"
                  placeholder="请输入船员紧急人电话"
                  v-model="formData.jjlxr_mobile"
                />
              </el-form-item>
              <el-form-item label="毕业院校" prop="byyx">
                <el-input
                  clearable
                  placeholder="请输入船员毕业院校"
                  v-model="formData.byyx"
                />
              </el-form-item>
              <el-form-item label="毕业时间" prop="bysj">
                <el-date-picker
                  style="width: 100%"
                  clearable
                  v-model="formData.bysj"
                  type="month"
                  placeholder="请选择毕业时间"
                />
              </el-form-item>
            </div>
            <div class="formHeadCont formHeadFlex">
              <div class="formHeadLeft">
                <div class="headShu"></div>
                <div>工作经历</div>
              </div>
              <btn value="新增经验" @click="addExpItemFn"></btn>
            </div>
            <div class="workList">
              <div
                :class="index % 3 == 0 ? 'bookItem noLeft' : 'bookItem'"
                :key="index"
                v-for="(item, index) in formData.resume_experience"
              >
                <div class="bookTop">
                  <div class="name">
                    <div>{{ item.comName }}（{{ item.zw }}）</div>
                  </div>
                </div>
                <div class="epxInfo">{{ item.scsj }} 至 {{ item.xcsj }}</div>
                <div class="expItems">
                  <div class="expItem">船名：{{ item.cm }}</div>
                  <div class="expItem">船型：{{ item.cx }}</div>
                  <div class="expItem">航区：{{ item.hx }}</div>
                  <div class="expItem">
                    总吨/马力：{{ item.zd }}/{{ item.ml }}
                  </div>
                </div>
                <div class="expCtrl">
                  <el-button
                    color="#f56c6c"
                    plain
                    style="margin-right: 15px"
                    @click="delExpFn(index)"
                    >删除经历</el-button
                  >
                  <btn value="编辑经历" @ok="editExpShowFn(item, index)"></btn>
                </div>
              </div>
            </div>
            <div class="formHeadCont formHeadFlex">
              <div class="formHeadLeft">
                <div class="headShu"></div>
                <div>船员证书</div>
              </div>
              <btn value="新增证书" @click="addBookFn"></btn>
            </div>
            <div class="flexCont">
              <el-form-item label=" " class="flexPull">
                <div class="customCont">
                  <div
                    class="customItem flexPull"
                    :key="index"
                    v-for="(item, index) in formData.zs_json"
                  >
                    <div class="customTd">
                      <el-input
                        clearable
                        :disabled="item.dis"
                        placeholder="证书名称"
                        v-model="item.name"
                      />
                    </div>
                    <div class="customTd">
                      <el-input
                        clearable
                        :disabled="disNumArr.includes(item.name)"
                        :placeholder="getPlach(item.name)"
                        v-model="item.number"
                      />
                    </div>
                    <div class="customTd">
                      <el-date-picker
                        class="datePull"
                        clearable
                        v-model="item.time"
                        type="date"
                        placeholder="请选择证书到期时间"
                      />
                    </div>
                    <el-button
                      color="#f56c6c"
                      plain
                      :disabled="item.dis"
                      @click="deleteBookFn(index)"
                      >删除证书</el-button
                    >
                  </div>
                </div>
              </el-form-item>
            </div>
            <el-form-item class="flexPull" label=" ">
              <btn
                :value="detailId ? '保存简历编辑' : '录入人才库'"
                @ok="saveFn"
              ></btn>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-dialog
        v-model="showAddExp"
        title="新增/编辑工作经验"
        :close-on-click-modal="false"
      >
        <div v-if="showAddExp">
          <el-form
            ref="expRef"
            label-width="80"
            :rules="expRules"
            :model="activeExpItem"
          >
            <div class="maskFlexItem">
              <el-form-item label="公司" prop="comName">
                <el-input
                  clearable
                  v-model="activeExpItem.comName"
                  placeholder="请输入公司"
                />
              </el-form-item>
              <el-form-item label="船名" prop="cm">
                <el-input
                  clearable
                  v-model="activeExpItem.cm"
                  placeholder="请输入船名"
                />
              </el-form-item>
              <el-form-item label="职务" prop="zw">
                <el-select
                  style="width: 100%"
                  v-model="activeExpItem.zw"
                  filterable
                  allow-create
                  clearable
                  placeholder="请选择/输入职务"
                >
                  <el-option
                    v-for="item in positionArr"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="船型" prop="cx">
                <el-select
                  style="width: 100%"
                  v-model="activeExpItem.cx"
                  filterable
                  allow-create
                  clearable
                  placeholder="请选择/输入船型"
                >
                  <el-option
                    v-for="item in bootTypeArr"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="航区" prop="hx">
                <el-select
                  style="width: 100%"
                  v-model="activeExpItem.hx"
                  filterable
                  allow-create
                  clearable
                  placeholder="请选择/输入航区"
                >
                  <el-option
                    v-for="item in bootLineArr"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="总吨" prop="zd">
                <el-input
                  clearable
                  placeholder="请输入总吨"
                  v-model="activeExpItem.zd"
                />
              </el-form-item>
              <el-form-item label="马力" prop="ml">
                <el-input
                  clearable
                  placeholder="请输入马力"
                  v-model="activeExpItem.ml"
                />
              </el-form-item>
              <el-form-item label="上船时间" prop="scsj">
                <el-date-picker
                  clearable
                  style="width: 100%"
                  v-model="activeExpItem.scsj"
                  type="month"
                  placeholder="请选择此经历上船时间"
                />
              </el-form-item>
              <el-form-item label="下船时间" prop="xcsj">
                <el-date-picker
                  style="width: 100%"
                  clearable
                  v-model="activeExpItem.xcsj"
                  type="month"
                  placeholder="请选择此经历下船时间"
                />
              </el-form-item>
            </div>
          </el-form>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showAddExp = false">取消</el-button>
            <el-button type="primary" @click="sureEditExpFn">
              保存经历
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </outMain>
</template>
<style scoped lang="less">
.workList {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.bookItem {
  width: 32%;
  background-color: #f8f8f8;
  border-radius: 5px;
  padding: 15px;
  margin-left: 2%;
  box-sizing: border-box;
  margin-bottom: 15px;
  .bookTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .name {
      display: flex;
      align-items: center;
      font-weight: bold;
      font-size: 13px;
      .iconfont {
        margin-right: 7.5px;
      }
    }
  }
  .bookInfo {
    color: #666;
    font-size: 12px;
    .number {
      margin: 7.5px 0;
    }
    .bookTime {
      color: #666;
      font-size: 12px;
    }
  }
  .epxInfo {
    color: #333;
    font-size: 12px;
    margin-top: 5px;
  }
  .expItems {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: #333;
    .expItem {
      width: 48%;
      font-size: 12px;
      margin-top: 5px;
    }
  }
  .expCtrl {
    margin-top: 15px;
  }
}
.noLeft {
  margin-left: 0;
}
</style>
